<template>
  <div class="box">
    <div style="width: 100%; height: 20px; background-color: #f6f6f6"></div>
    <div class="mainBody">
      <div class="user">
        <div class="sculpture">
          <img src="../../assets/img/tou.png" alt="" />
        </div>
        <div class="userName">
          <div class="userName-1">用户名_gbzg188</div>
          <div class="userName-2">15855573332</div>
        </div>
      </div>
      <div class="memberships">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane
            v-for="item in memberList.value"
            :label="item.name"
            :name="item.name"
          >
            <template #label>
              <span class="custom-tabs-label" @click="handleClick(item)">
                <div class="hy">
                  <img :src="item.url" alt="" />
                  <!-- {{ item.url }} -->
                </div>
                <span>{{ item.name }}</span>
              </span>
            </template>
            <div class="sRecharge">
              <div class="radio">
                <div class="radio-span">
                  <div
                    class="stitle1"
                    :class="{ checked: active === item1.id }"
                    @click="changeStatus(item1)"
                    v-for="item1 in price.value"
                  >
                    <div class="tj">推荐</div>
                    <div class="yin" v-if="item1.num == 1 && item1.unit == 'y'">
                      一年/人民币
                    </div>
                    <div class="yin" v-if="item1.num == 2 && item1.unit == 'y'">
                      二年/人民币
                    </div>
                    <div class="yin" v-if="item1.num == 3 && item1.unit == 'y'">
                      三年/人民币
                    </div>
                    <div class="yin-y">
                      <div class="ms">秒杀价：</div>
                      <div class="msjia">{{ item1.price }}</div>
                    </div>
                    <div class="yjia">原价：¥6000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <!-- <div class="title1" :class="{ checked: active === 20 }" @click="changeStatus(20)">
                    <div class="tj kb"></div>
                    <div class="yin">二年/人民币</div>
                    <div class="yin-y">¥10000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 90 }" @click="changeStatus(90)">
                    <div class="tj kb"></div>
                    <div class="yin">三年/人民币</div>
                    <div class="yin-y">¥14000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- </div> -->
          <!-- <el-tab-pane label="Config" name="second">
            <template #label>
              <span class="custom-tabs-label">
                <div class="hy">
                  <img src="../../assets/img/蒙版组 2@2x.png" alt="" />
                </div>
                <span>高级会员</span>
              </span>
            </template>
            <div class="Recharge">
              <div class="radio">
                <div class="radio-span">
                  <div class="title1" :class="{ checked: active === 10 }" @click="changeStatus(10)">
                    <div class="tj">推荐</div>
                    <div class="yin">一年/人民币</div>
                    <div class="yin-y">¥6000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 20 }" @click="changeStatus(20)">
                    <div class="tj kb"></div>
                    <div class="yin">二年/人民币</div>
                    <div class="yin-y">¥10000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 90 }" @click="changeStatus(90)">
                    <div class="tj kb"></div>
                    <div class="yin">三年/人民币</div>
                    <div class="yin-y">¥14000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Role" name="third">
            <template #label>
              <span class="custom-tabs-label">
                <div class="hy">
                  <img src="../../assets/img/蒙版组 4@2x.png" alt="" />
                </div>
                <span>VIP会员</span>
              </span>
            </template>
            <div class="Recharge">
              <div class="radio">
                <div class="radio-span">
                  <div class="title1" :class="{ checked: active === 10 }" @click="changeStatus(10)">
                    <div class="tj">推荐</div>
                    <div class="yin">一年/人民币</div>
                    <div class="yin-y">¥6000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 20 }" @click="changeStatus(20)">
                    <div class="tj kb"></div>
                    <div class="yin">二年/人民币</div>
                    <div class="yin-y">¥10000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 90 }" @click="changeStatus(90)">
                    <div class="tj kb"></div>
                    <div class="yin">三年/人民币</div>
                    <div class="yin-y">¥14000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Task" name="fourth">
            <template #label>
              <span class="custom-tabs-label">
                <div class="hy">
                  <img src="../../assets/img/蒙版组 5@2x.png" alt="" />
                </div>
                <span>VIP会员</span>
              </span>
            </template>
            <div class="Recharge">
              <div class="radio">
                <div class="radio-span">
                  <div class="title1" :class="{ checked: active === 10 }" @click="changeStatus(10)">
                    <div class="tj">推荐</div>
                    <div class="yin">一年/人民币</div>
                    <div class="yin-y">¥6000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 20 }" @click="changeStatus(20)">
                    <div class="tj kb"></div>
                    <div class="yin">二年/人民币</div>
                    <div class="yin-y">¥10000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 90 }" @click="changeStatus(90)">
                    <div class="tj kb"></div>
                    <div class="yin">三年/人民币</div>
                    <div class="yin-y">¥14000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Task1" name="fourth1"><template #label>
              <span class="custom-tabs-label">
                <div class="hy">
                  <img src="../../assets/img/蒙版组 6@2x.png" alt="" />
                </div>
                <span>钻石会员</span>
              </span>
            </template>
            <div class="Recharge">
              <div class="radio">
                <div class="radio-span">
                  <div class="title1" :class="{ checked: active === 10 }" @click="changeStatus(10)">
                    <div class="tj">推荐</div>
                    <div class="yin">一年/人民币</div>
                    <div class="yin-y">¥6000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 20 }" @click="changeStatus(20)">
                    <div class="tj kb"></div>
                    <div class="yin">二年/人民币</div>
                    <div class="yin-y">¥10000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                  <div class="title1" :class="{ checked: active === 90 }" @click="changeStatus(90)">
                    <div class="tj kb"></div>
                    <div class="yin">三年/人民币</div>
                    <div class="yin-y">¥140000</div>
                    <div class="Selected" id="myElement">
                      <img src="../../assets/img/组 4921@2x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane> -->
        </el-tabs>
        <div
          style="
            width: 1120px;
            height: 220px;
            background-color: #f6f6f6;
            margin-left: 40px;
          "
        >
          <div class="spaymentMethod">
            <div class="payment">支付方式</div>
            <div
              class="Method"
              :class="{ checked1: active1 === 40 }"
              @click="changeStatus1(40)"
            >
              <div class="wx">
                <img src="../../assets/img/组 4897@2x.png" alt="" />
              </div>
              <div class="zf">微信支付</div>
              <div class="wx-1">
                <img src="../../assets/img/组 4921@2x.png" alt="" />
              </div>
            </div>
            <div
              class="Method"
              :class="{ checked1: active1 === 50 }"
              @click.stop="changeStatus1(50)"
            >
              <div class="wx">
                <img src="../../assets/img/组 4898@2x.png" alt="" />
              </div>
              <div class="zf">支付宝支付</div>
              <div class="wx-1">
                <img src="../../assets/img/组 4921@2x.png" alt="" />
              </div>
            </div>
            <div
              class="Method"
              :class="{ checked1: active1 === 60 }"
              @click="changeStatus1(60)"
            >
              <div class="wx">
                <img src="../../assets/img/组 4899@2x.png" alt="" />
              </div>
              <div class="zf">对公打款</div>
              <div class="wx-1">
                <img src="../../assets/img/组 4921@2x.png" alt="" />
              </div>
            </div>
          </div>
          <div class="sDeduction">
            <el-input v-model="input" placeholder="请输入抵扣码" />
            <el-button class="button-1" type="primary" @click="postPrice()"
              >验证</el-button
            >
            <div class="successful">验证成功！抵扣100元。</div>
            <div class="yj">原价:¥{{ pay_price }}</div>
            <div class="ssuccessful-1">实付:</div>
            <div class="ssuccessful-2">¥{{ actualPayment }}</div>
            <el-button class="sbutton-2" type="primary" @click="purchase()"
              >立即购买</el-button
            >
          </div>
          <div class="memberships-bottom">
            <div class="bottom-1">请在支付完成后按提示提交开票资料</div>
            <div class="bottom-2">
              <el-radio v-model="radio" label="1">
                <div>同意</div>
                <div>《中国招标与采购网会员服务协》</div>
              </el-radio>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        v-model="dialogVisible"
        width="15%"
        :before-close="handleClose"
      >
        <div style="width: 100%; margin-left: 80px">
          <qrcode-vue :value="weChatPaymentCode" size:400></qrcode-vue>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >Confirm</el-button
        > -->
          </span>
        </template>
      </el-dialog>

      <!-- 会员权益---表格 -->
      <div class="w padding">
        <div class="table_wrapper2">
          <div class="table-top">中国招标与采购网会员服务列表（2023版）</div>
          <table class="table_info" border="1" width="1120px">
            <tr style="height: 60px">
              <th class="member_normal" colspan="3">服务内容</th>
              <th class="member_normalss active_color">
                标准会员<br />（43）项
              </th>
              <th class="member_high">高级会员<br />（53）项</th>
              <th class="member_vip">VIP会员<br />（65）项</th>
              <th class="member_baijin">白金会员<br />（69）项</th>
              <th class="member_zuanshi">钻石会员<br />（76）项</th>
            </tr>
            <tr style="text-align: center">
              <th rowspan="12" style="width: 130px">招标服务<br />（12项）</th>
              <td colspan="2">01.招标预告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">02.招标公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">03.中标结果</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">04.变更公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">05.国际招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">06.拍卖公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">07.企业采购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">08.会员招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">09.会员求购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">10.邀请招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">11.采招资讯</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">12.线上招标服务</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="5" style="width: 130px">项目服务<br />（5项）</th>
              <td style="width: 239px">01.业主委托项目</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.VIP独家项目</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.拟在建项目</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.优质项目推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">05.项目唯一推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip" style="width: 114px">1次</td>
              <td class="member_baijin" style="width: 114px">5次</td>
              <td class="member_zuanshi" style="width: 114px">10次</td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="5" style="width: 130px">专业服务<br />（5项）</th>
              <td style="width: 239px">01.特约项目查询</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">5次</td>
              <td class="member_vip">10次</td>
              <td class="member_baijin">15次</td>
              <td class="member_zuanshi">20次</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 150px">02.独家项目监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.项目汇总导出</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.重点投资项目排期</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">05.专属团队项目监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">3次</td>
              <td class="member_zuanshi" style="width: 114px">5次</td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="4" style="width: 130px">标书服务<br />（4项）</th>
              <td style="width: 239px">01.代写标书</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">1次</td>
              <td class="member_baijin" style="width: 114px">2次</td>
              <td class="member_zuanshi" style="width: 114px">5次</td>
            </tr>
            <tr style="text-align: center">
              <td>02.标书审核</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.部分标书下载</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">04.标书编制咨询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="13" style="width: 130px">数据服务<br />（13项）</th>
              <td style="width: 239px">01.数据信息定制</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.政府采购中心查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.工程建设交易中心查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.业主采购单位查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.设计研究单位查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.招标代理机构查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.招投标法律法规查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.历史招中标数据查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>09.历史招中标数据导出</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1500条（2次）</td>
              <td class="member_vip">1500条（3次）</td>
              <td class="member_baijin">1500条（4次）</td>
              <td class="member_zuanshi">1500条（5次）</td>
            </tr>
            <tr style="text-align: center">
              <td>10.招标区域密度分析</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>11.竞争对手实时监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>12.竞争对手分析报告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">季度报告（2份）</td>
              <td class="member_baijin">季度报告（4份）</td>
              <td class="member_zuanshi">季度报告（6份）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">13.招投标数据行业报告</td>
              <td class="member_normal active_color" style="width: 114px">
                另收费
              </td>
              <td class="member_high" style="width: 114px">另收费</td>
              <td class="member_vip" style="width: 114px">另收费</td>
              <td class="member_baijin" style="width: 114px">另收费</td>
              <td class="member_zuanshi" style="width: 114px">一个行业</td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="9" style="width: 130px">售后服务<br />（9项）</th>
              <td style="width: 239px">01.专属人工客服</td>
              <th class="member_normalss active_color">1v1</th>
              <td class="member_high">1v1 资深</td>
              <td class="member_vip">1v1 VIP</td>
              <td class="member_baijin">2v1 VIP</td>
              <td class="member_zuanshi">2v1 金牌</td>
            </tr>
            <tr style="text-align: center">
              <td>02.关键词定制</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.电话通知</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.邮件提醒</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.微信推送</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.短信提醒</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.单条内容导出</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.APP手机端</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">09.项目个性化定制</td>
              <td class="member_normal active_color" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="6" style="width: 130px">
                商机人脉
                <br />
                （6项）
              </th>
              <td style="width: 239px">01.指定业主监控</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.指定项目监控</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.重点项目专盯</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">5个</td>
              <td class="member_vip">10个</td>
              <td class="member_baijin">20个</td>
              <td class="member_zuanshi">50个</td>
            </tr>
            <tr style="text-align: center">
              <td>04.向业主方推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.向业主唯一推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">06.中标企业信息查询</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="9" style="width: 130px">口碑提升<br />（9项）</th>
              <td style="width: 239px">01.首页标王推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1个月</td>
              <td class="member_vip">2个月</td>
              <td class="member_baijin">3个月</td>
              <td class="member_zuanshi">6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>02.名企访谈</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.优秀供应商首页推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1个月</td>
              <td class="member_baijin">3个月</td>
              <td class="member_zuanshi">6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>04.加入优秀供应商库</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.中标喜讯展示</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.图片企业展厅</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.企业网站建设（模板）</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.首页横幅广告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1个月分站</td>
              <td class="member_vip">3个月分站</td>
              <td class="member_baijin">6个月分站</td>
              <td class="member_zuanshi">8个月分站</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">09.微信公众号推广</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">1期图文</td>
              <td class="member_baijin" style="width: 114px">2期图文</td>
              <td class="member_zuanshi" style="width: 114px">6期图文</td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="7" style="width: 130px">产品推广<br />（7项）</th>
              <td style="width: 239px">01.集中采购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.发布信息</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.企业电子样本发布</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1本</td>
              <td class="member_baijin">3本</td>
              <td class="member_zuanshi">5本</td>
            </tr>
            <tr style="text-align: center">
              <td>04.图片网络广告</td>
              <th class="member_normalss active_color">共享1个月</th>
              <td class="member_high">共享2个月</td>
              <td class="member_vip">独享1个月</td>
              <td class="member_baijin">独享3个月</td>
              <td class="member_zuanshi">独享6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>05.关键词广告</td>
              <th class="member_normalss active_color">1个月/2词</th>
              <td class="member_high">2个月/3词</td>
              <td class="member_vip">3个月/5词</td>
              <td class="member_baijin">6个月/8词</td>
              <td class="member_zuanshi">一年/12词</td>
            </tr>
            <tr style="text-align: center">
              <td>06.邮件集群定制广告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">3万封（一次）</td>
              <td class="member_zuanshi">5万封（一次）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">07.线下展示推广</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table
            border="1"
            width="1120px"
            style="margin-top: 10px; table-layout: fixed"
          >
            <tr style="text-align: center">
              <th rowspan="7" style="width: 130px">认证服务<br />（7项）</th>
              <td style="width: 239px">01.招标与采购网认证</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.招投标诚信认证</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.诚信供应商认证</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1本</td>
              <td class="member_baijin">3本</td>
              <td class="member_zuanshi">5本</td>
            </tr>
            <tr style="text-align: center">
              <td>04.投标资质完善指导</td>
              <th class="member_normalss active_color">共享1个月</th>
              <td class="member_high">共享2个月</td>
              <td class="member_vip">独享1个月</td>
              <td class="member_baijin">独享3个月</td>
              <td class="member_zuanshi">独享6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>05.AAA企业信用评级</td>
              <th class="member_normalss active_color">1个月/2词</th>
              <td class="member_high">2个月/3词</td>
              <td class="member_vip">3个月/5词</td>
              <td class="member_baijin">6个月/8词</td>
              <td class="member_zuanshi">一年/12词</td>
            </tr>
            <tr style="text-align: center">
              <td>06.政采优秀供应商认证</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">3万封（一次）</td>
              <td class="member_zuanshi">5万封（一次）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">07.体系认证</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px; font-size: 14px" colspan="7">
                <strong
                  >招标与采购网特别提示：
                  <img src="../../assets/img/路径 29@2x.png" alt="" />
                  标记为可以提供服务， --- 标记为不享受此功能</strong
                >
              </td>
            </tr>
          </table>
          <!-- <table border="1" width="1120px" style="margin-top: 10px;table-layout: fixed;">
    <tr style="text-align: center;">
      <th rowspan="7" style="width: 130px;">认证服务<br>（7项）</th>
      <td style="width: 239px;">01.招标与采购网认证</td>
      <th class="member_normalss active_color">800元</th>
      <td class="member_high">600元</td>
      <td class="member_vip">400元</td>
      <td class="member_baijin">200元</td>
      <td class="member_zuanshi"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
    </tr>
    <tr style="text-align: center;">
      <td>02.招投标诚信认证</td>
       <th class="member_normalss active_color">28800元</th>
      <td class="member_high">25800元</td>
      <td class="member_vip">19800元</td>
      <td class="member_baijin">7800元</td>
      <td class="member_zuanshi"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
    </tr>
    <tr style="text-align: center;">
      <td>03.诚信供应商认证</td>
       <th class="member_normalss active_color">---</th>
      <td class="member_high">---</td>
      <td class="member_vip">---</td>
      <td class="member_baijin">---</td>
      <td class="member_zuanshi">1次</td>
    </tr>
    <tr style="text-align: center;">
      <td>04.投标资质完善指导</td>
   <td class="member_normalss active_color"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
      <td class="member_high"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
      <td class="member_vip"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
      <td class="member_baijin"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
      <td class="member_zuanshi"><img src="../../assets/img/路径 29@2x.png" alt=""></td>
    </tr>
    <tr style="text-align: center;">
      <td>05.AAA企业信用评级</td>
       <th class="member_normalss active_color">---</th>
      <td class="member_high">---</td>
      <td class="member_vip">---</td>
      <td class="member_baijin">---</td>
      <td class="member_zuanshi">1次</td>
    </tr>
    <tr style="text-align: center;">
      <td>06.政采优秀供应商认证</td>
      <td class="member_normal active_color ">---</td>
      <td class="member_high">---</td>
      <td class="member_vip">---</td>
      <td class="member_baijin">---</td>
      <td class="member_zuanshi">1次</td>
    </tr>
    <tr style="text-align: center;">
      <td style="width: 205px;">07.体系认证</td>
      <td class="member_normal active_color" style="width: 114px;">另收费</td>
      <td class="member_high" style="width: 114px;">另收费</td>
      <td class="member_vip" style="width: 114px;">另收费</td>
      <td class="member_baijin" style="width: 114px;">另收费</td>
      <td class="member_zuanshi" style="width: 114px;">另收费</td>
    </tr>
    <tr style="text-align: center;">
      <td style="width: 205px; font-size: 14px;" colspan="7"><strong>招标与采购网特别提示： <img src="../../assets/img/路径 29@2x.png" alt=""> 标记为可以提供服务， --- 标记为不享受此功能</strong></td>
    </tr>
  </table> -->
          <div class="table-top">中国招标与采购网高端定制服务</div>
          <table border="1" width="1120px" style="table-layout: fixed">
            <tr style="text-align: center; height: 30px">
              <th rowspan="6" style="width: 130px">企信通</th>
              <td style="width: 246px">企业资质查询</td>
              <td
                style="
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                  width: 180px;
                "
                lay-on="mianyi"
              >
                面议
              </td>
              <td rowspan="16" style="font-weight: bold; width: 130px">
                投<br />
                标<br />
                加<br />
                分<br />
                证<br />
                书
              </td>
              <td style="width: 253px">ISO9001质量管理体系认证</td>
              <td
                style="
                  color: #347aea;
                  width: 180px;
                  font-weight: bold;
                  cursor: pointer;
                "
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">人员资格查询</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td class="EFF6FF">ISO14001环境管理体系认证</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>企业奖惩查询</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td>ISO45001职业健康安全管理体系认证</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">中标业绩查询</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td class="EFF6FF">ISO20000信息技术服务管理体系认证</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>经营风险查询</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td>ISO27001信息安全管理体系认证</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">业绩报告下载</td>
              <td
                class="EFF6FF"
                style="
                  width: 130px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                "
                lay-on="mianyi"
              >
                面议
              </td>
              <td class="EFF6FF">ISO22000食品安全管理体系认证</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>
            <tr style="text-align: center; height: 30px">
              <th rowspan="6" style="width: 130px">标训圈</th>
              <td>招投标技能企业内训</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                1968元/人/次
              </td>
              <td>GB/T31950企业诚信管理体系认证</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">投标实战100问培训</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                4800元/人/次
              </td>
              <td class="EFF6FF">SA8000社会责任标准管理体系认证</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>控标技巧特训营培训</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                4800元/人/次
              </td>
              <td>GB/T 35770合规管理体系认证</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">满分投标文件编制培训</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                4800元/人/次
              </td>
              <td class="EFF6FF">商品售后服务体系认证（五星）</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>投标全流程法律解析培训</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                4800元/人/次
              </td>
              <td>售后服务体系完善程度认证（七星）</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">投诉/质疑/异议处理技能培训</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                4800元/人/次
              </td>
              <td class="EFF6FF">信用中国信用修复</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <th rowspan="4" style="width: 130px">招投标大数据</th>
              <td>API接口同步对接</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td>AAAA标准化等级证书</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">招中标数据汇总导出</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td class="EFF6FF">AAA级重合同守信用证书</td>
              <td
                class="EFF6FF"
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>招投标数据分析报告</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
              <td>AAA级企业信用等级证书</td>
              <td
                style="color: #347aea; font-weight: bold; cursor: pointer"
                lay-on="mianyi"
              >
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF" style="width: 200px">招投标大数据会员</td>
              <td
                class="EFF6FF"
                style="
                  width: 120px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                "
              >
                面议
              </td>
              <td class="EFF6FF" style="width: 220px">AAA级企业资信等级证书</td>
              <td
                class="EFF6FF"
                style="
                  width: 100px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                "
              >
                面议
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  complete,
  postMember,
  memberPrice,
  weChatPayment,
  testVerify,
} from "../../Api/complete/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import QrcodeVue from "qrcode.vue";
const dialogVisible = ref(false);
// const qrCode123 = ref("我是二维码信息")

// const handleClose = () => {
//   ElMessageBox.confirm('Are you sure to close this dialog?')
//     .then(() => {
//       done()
//     })
//     .catch(() => {
//       // catch error
//     })
//   }
const router = useRouter();
const actualPayment = ref(0); //实付金额
const imgList = reactive([
  { url: new URL(`../../assets/img/3.png`, import.meta.url).href, id: 2 },
  { url: new URL(`../../assets/img/2.png`, import.meta.url).href, id: 3 },
  {
    url: new URL(`../../assets/img/蒙版组 4@2x.png`, import.meta.url).href,
    id: 4,
  },
  {
    url: new URL(`../../assets/img/蒙版组 5@2x.png`, import.meta.url).href,
    id: 5,
  },
  {
    url: new URL(`../../assets/img/蒙版组 6@2x.png`, import.meta.url).href,
    id: 6,
  },
]);
// 请求全部会员等级
// const form1 = reactive({
//   userpwd: "",
//   account: "",
// });
const memberList = reactive([]);
postMember().then((res) => {
  if (res.data.code == 1) {
    memberList.value = res.data.data;
    memberList.value.forEach((item) => {
      item.url = 0;
      imgList.forEach((element) => {
        if (item.id == element.id) {
          item.url = element.url;
        }
      });
    });
  } else {
    ElMessage.error(res.data.msg);
  }
});
const form = reactive({
  level_id: 2,
});
memberPrice(form).then((res) => {
  if (res.data.code == 1) {
    price.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
// 生成微信二维码
// 验证劵
const input = ref(""); //输入框
const amount = ref();
const coupons = ref(); //
const clientid = ref("1");
// const code = ref()
const postPrice = () => {
  const form = reactive({
    clientid: clientid,
    code: input,
  });
  testVerify(form).then((res) => {
    if (res.data.code == 1) {
      amount.value = res.data.data.money;
      actualPayment.value = (pay_price.value - amount.value).toFixed(2);
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
// 会员购买对应的价格
const price = reactive([]); //会员价格
const postMemberPrice = () => {
  const form = reactive({
    level_id: memberId.value,
  });
  memberPrice(form).then((res) => {
    if (res.data.code == 1) {
      price.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//立即购买
const purchase = (event) => {
  if (pay_price.value == 0) {
    ElMessage.error("请选择您的会员标准");
  } else if (active1.value == 0) {
    ElMessage.error("请选择您的支付方式");
  } else {
    if (active1.value == 40) {
      postWxPrice();
    } else if (condition) {
      // 支付宝支付
    } else {
      // 对公账户
    }
  }
};
// 微信支付
// const price = reactive([])//会员价格
const weChatPaymentCode = ref();
const postWxPrice = () => {
  const form = reactive({
    clientid: "1",
    level_id: level_id.value,
    rid: rid.value,
    pay_price: pay_price.value,
  });
  axios
    .post(
      "http://api.51zhaobiao.com.cn/pay/wechat?clientid=1&level_id=2&rid=2&pay_price=3000.00"
    )
    .then((res) => {
      weChatPaymentCode.value = res.data.data.code_url;
      // getQRInviteCode()
      dialogVisible.value = true;
      console.log(weChatPaymentCode.value);
    });
  // weChatPayment(form).then((res) => {
  //   if (res.data.code==1) {
  //   }else{
  //     ElMessage.error(res.data.msg)
  //   }
  //   });
};
watch(router, (to, from) => {
  router.go(0);
});
const radio = ref("0");
const active = ref(0);
const active1 = ref(0);
const activeName = ref("标准会员"); //默认标准会员
const memberId = ref(0);
const level_id = ref(0);
const rid = ref(0);
const pay_price = ref(0);
const changeStatus = (number) => {
  active.value = number.id;
  level_id.value = number.level_id;
  rid.value = number.id;
  pay_price.value = number.price;
  actualPayment.value = number.price;
};

const changeStatus1 = (number) => {
  active1.value = number;
};

const handleClick = (event) => {
  memberId.value = event.id;
  activeName.value = event.name;
  postMemberPrice();
};
</script>
<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.mainBody {
  width: 1200px;
  height: 5000px;
  background-color: #fff;
  margin: 0 auto;
}

.user {
  // width: 300px;
  height: 80px;
  margin-left: 40px;
  padding-top: 40px;
  display: flex;
}

.sculpture {
  width: 80px;
  height: 80px;

  img {
    width: 100%;
    height: 100%;
  }
}

.userName {
  margin-left: 20px;
  width: 300px;
  height: 80px;
  margin-bottom: 37px;

  .userName-1 {
    height: 20px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 60px;
    color: #333333;
  }

  .userName-2 {
    height: 20px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 80px;
    color: #333333;
  }
}

//开通会员页面
.memberships {
  //   margin: 0 auto;
  padding: 70px 0 0 0;
  width: 1160px;
  // height: 490px;
  //   background-color: #fff;
}

.el-tabs__content {
  width: 1160px;
  box-sizing: border-box;
  // height: 400px;
}

.el-tabs--card > .el-tabs__header {
  border: none !important;
  margin-left: 40px;
}

.demo-tabs {
  height: 240px;
}

.el-tabs__header .is-top {
  height: 60px;
  line-height: 40px;
  border: none !important;
}

.el-tabs__item.is-active {
  width: 180px;
  height: 60px;
  background: linear-gradient(225deg, #fbcf89 0%, #efd6a8 100%);
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  margin-top: 0;
}

.el-tabs__item {
  width: 180px;
  padding: 0;
  background: linear-gradient(180deg, #515151 0%, #4c4c4c 52%, #3a3a3a 100%);
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  box-sizing: border-box;
  margin-top: 20px;
  padding-top: 0px;
}

#tab-second {
  padding: 0;
}

.custom-tabs-label {
  display: flex;

  span {
    width: 100px;
    text-align: left;
    margin-top: -20px;
  }

  .hy {
    margin-left: 35px;
    margin-top: -20px;
    width: 20px;
    height: 20px;

    img {
      width: 20px;
      height: 20px;
    }
  }
}

.is-active .custom-tabs-label {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 60px;
  margin-left: -20px;
  color: #6d4315;

  span {
    width: 100px;
    text-align: left;
    margin-top: 0px;
  }

  .hy {
    width: 32px;
    height: 30px;
    margin-top: -4px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.custom-tabs-label {
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 40px;
  color: #ffffff;
}

.sRecharge {
  width: 1120px;
  // height: 400px;
  background: #f6f6f6;
  opacity: 1;
  border-radius: 0px;
  margin-left: 40px;
  margin-top: 5px;
}

.radio {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;

  w span {
    width: 150px;
    font-size: 30px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }

  .radio-span {
    display: flex;
    margin-left: 20px;

    .stitle1 {
      width: 345px;
      height: 150px;
      border-radius: 8px;
      background-color: #fff;
      margin: 30px 20px 30px 0;
      padding: 0;
      position: relative;
    }

    .checked {
      color: #537cf5;
      // border: 1px solid #537cf5;
      border: 2px solid #f5d3a3;

      .Selected {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px !important;
        height: 60px !important;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .yin {
        color: #333333;
      }

      .yin-y {
        color: #d92f2f;
      }
      .tj {
        width: 60px;
        height: 26px;
        background: #d92f2f;
        opacity: 1;
        border-radius: 8px 0px 8px 0px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        opacity: 1;
        text-align: center;
      }
    }
  }
}

.yin {
  width: 100%;
  height: 19px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  text-align: center;
  margin-top: 10px;
}

.yin-y {
  // width: 100%;
  height: 34px;

  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  margin-top: 20px;
  text-align: center;
  display: flex;
  .ms {
    // width: 100%;
    font-size: 18px;
    margin-left: 60px;
  }
  .msjia {
    font-size: 34px;
  }
}
.yjia {
  width: 100%;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #acacac;
  opacity: 1;
  text-align: center;
  text-decoration: line-through;
}
.tj {
  width: 60px;
  height: 26px;
  background: #fff;
  opacity: 1;
  border-radius: 8px 0px 8px 0px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #ffffff;
  opacity: 1;
  text-align: center;
  // margin-top: 20px;
}

.Selected {
  width: 60px;
  height: 60px;
  // display: none;
  position: absolute;
  bottom: 0;
  right: 0;

  img {
    width: 0;
    height: 0;
  }
}

.kb {
  margin-top: 20px;
  background-color: #fff;
}

.spaymentMethod {
  width: 1075px !important;
  height: 70px;
  background: #ffffff;
  // opacity: 1;
  border-radius: 8px;
  margin-left: 20px;
  display: flex;
  z-index: 100 !important;
  margin-top: 30px;
  // padding-top: 45px;
}

.payment {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #333333;
  opacity: 1;
  margin: 35px 40px 27px 20px;
}

.Method {
  margin-right: 25px;
  width: 180px !important;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dddddd;
  opacity: 1;
  border-radius: 4px;
  display: flex;
  margin-top: 15px;
  position: relative;

  .wx {
    width: 27px;
    height: 24px;
    margin: 8px 0 8px 40px;

    img {
      width: 27px;
      height: 24px;
    }
  }

  .zf {
    margin-left: 5px;
    margin-top: 10px;
  }

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;

    img {
      width: 0;
      height: 1;
    }
  }
}

.checked1 {
  background: #fefaf2;
  border: 1px solid #f5d3a3;

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px !important;
    height: 20px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.sDeduction {
  margin-left: 20px;
  margin-top: 30px;
  display: flex;
  height: 45px;
  width: 1140px;
  position: relative;
  .el-input {
    margin-top: 10px;
    width: 250px;
    height: 40px;
  }

  .button-1 {
    margin-top: 10px;
    margin-left: 10px;
    width: 80px;
    height: 40px;
    background: #6675ff;
    opacity: 1;
    border-radius: 4px;
  }

  .sbutton-2 {
    position: absolute;
    right: 60px;
    // margin-left: 10px;
    width: 180px;
    height: 60px;
    background: linear-gradient(360deg, #6675ff 0%, #8995ff 51%, #6675ff 100%);
    opacity: 1;
    border-radius: 4px;

    span {
      width: 88px;
      height: 22px;
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 0px;
      color: #ffffff;
      opacity: 1;
      // margin-left:60px
    }
  }

  .successful {
    // width: 80px;
    margin-top: 28px;
    margin-left: 25px;
    margin-right: 70px;
    // width: 171px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .yj {
    margin-top: 28px;
    // width: 115px;
    margin-right: 15px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-decoration: line-through;
  }

  .ssuccessful-1 {
    // width: 50px;
    margin-top: 28px;
    // margin-left: 600px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .ssuccessful-2 {
    // width: 100px;
    margin-top: 28px;
    margin-left: 0;
    font-size: 24px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #d92f2f;
    opacity: 1;
  }
}

.memberships-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // padding-bottom: 40px;
  width: 1080px;
  height: 20px;
  margin: 0 auto;
  // background-color: #000;
}

.el-radio__inner {
  border-radius: 2px !important;
}

.el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 8px;
  height: 3px;
  border: 1px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 2px;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

.bottom-1 {
  margin-top: 17px;
  width: 256px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #d92f2f;
  opacity: 1;
}

.el-radio__label {
  display: flex;
}
.table-top {
  margin-top: 50px;
  width: 1120px;
  background-color: #6675ff;
  text-align: center;
  height: 60px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 60px;
  color: #ffffff;
}
table,
tr,
th {
  border-collapse: collapse;
}
th {
  width: 130px !important;
}
.active_color {
  color: #347aea;
}

// .table_title {
//     display: inline-block;
//     width: 70vw;
//     height: 3.75vw;
//     background-color: #347AEA;
//     text-align: center;
//     line-height: 3.75vw;
//     font-size: 22px;
//     color: #fff;
// }

.table_wrapper2 {
  margin-top: 50px;
  margin-left: 40px;
}
.table th:nth-child(1) {
  width: 100px;
}
.member_normal {
  width: 246px !important;
  height: 60px;
  padding: 0;
  margin: 0;
  img {
    width: 18px;
    height: 14px;
  }
}
.member_normalss {
  width: 150px !important;
  height: 60px;
  img {
    width: 18px;
    height: 14px;
  }
}
.member_high {
  width: 150px !important;
  height: 60px;
  img {
    width: 18px;
    height: 14px;
  }
}
.member_vip {
  width: 150px !important;
  height: 60px;
  img {
    width: 18px;
    height: 14px;
  }
}
.member_baijin {
  width: 150px !important;
  height: 60px;
  img {
    width: 18px;
    height: 14px;
  }
}
.member_zuanshi {
  width: 150px !important;
  height: 60px;
  img {
    width: 18px;
    height: 14px;
  }
}
</style>
